html綁定class

object

在前一日有提到切換頁籤功能，我們用click改變元素的class。
邏輯是：

1. click改變條件式，記得要在data宣告condition

<button @click='condition = !condition'></button>

2. 條件式更動，class更動觸發

<p :class={ whiteColor : condition }>變化這裡字的樣式</p>

記得在css給予變化的樣式

.whiteColor{
    color: #fff
}

一樣附上官網連結Class 与 Style 绑定

我們可以輸入更多的className且分離條件，例如

<p :class={ whiteColor : condition, 'change-size' : conditionSize }>變化這裡字的樣式</p>

我們也可以給一個objectName，把兩個屬性都寫進去，把objectName放在data裡：

data:{
    objectName{
        whiteColor: true,
        'change-size':false,
    }
}

html裡改成

<p :class='objectName'>變化這裡字的樣式</p>

也可以改成把objectName宣告在computed裡面return出來，這也是很常用的方式。

array

我們可以把array綁上去：

<p :class='[whiteColorClass,changeSizeClass]'>變化這裡字的樣式</p>

array裡的元素要宣告在data裡面：

data: {
  whiteColorClass: 'whiteColor',
  changeSizeClass: 'change-size'
}

這樣在html右鍵 -> 檢查元件可以觀察到，渲染成：

<p class="whiteColor change-size"></p>

style

看似寫CSS，但其實是寫JS，直接上範例應該就能理解：

<p :style="{ color: mainColor, fontSize: mobileFontSize + 'px' }"></p>

data:{
    mainColor: '#ddd',
    mobileFontSize: 14,
}

直接綁定一個object使可讀性更好：

<p :style="styleObject"></p>

data:{
    styleObject{
        color: '#ddd',
        font-size: '14px',
    }
}

如果需要計算，像sass直接進行計算，可以宣告在computed；一樣也是可以用array。

prefix

vue會自動偵測添加

小結

感覺好像寫很多，但大部分也都是官網的內容，讀官網開卷有益～假日就偷懶一下好了XD